html{
    scroll-behavior:smooth;
}

.avatar_transicion {
    background: white;
    width: 100%;
    height: 100%;  
    transition: all 1s linear;
    display: block;
    visibility: hidden;
  }
  
  .reporte_transicion {
    transition: all 1s linear;
  }
  
  
.menu_reporte_personalizado {
    width: 100%;
    height: 100%;
    margin: 5px 0 10px 0;
    transition: all 1s linear;
    display: block;
  }


 


  .hidden {
    display:none;
  }
  
  .visuallyhidden {
    opacity: 0;
  }
  
  button {
    display: block;
    margin: 0;
  }
  
  /* Sección - Reporte y Video Tutorial */
  div.reporte_videotutorial{
      margin:0; 
      padding: 0; 
      width: 100%;  
      height: 100%;
      background-color:white;
  }
  
  div.reporte_videotutorial div.videotutorial{
      width:  90%;
      height: 90%;   
      margin: 2% auto;
      border-radius: 10px; 
      box-shadow: 10px 10px 5px #999;

      max-width: 730px;
      /*max-height: 458px;*/
  }
  
  div.reporte_videotutorial video.videotutorial{    
      width:  100%;
      height:  90%; 
      margin-top:0%;
  }
  
  div.reporte_videotutorial div.seccion_button{  
      width:100%; 
      height: 10%;
      margin: auto; 
      background-color:white; 
      border-radius: 0px 0px 10px 10px; 
      box-shadow: 8px 9px 5px #999;
  }
  
  div.reporte_videotutorial div.seccion_button img.button_ok{
      display: block; 
      width: 140px; 
      height: 90px;      
      margin: auto;       
  }
  
  img.button_ok:hover{
      content:url("../imagenes/ok-button_over.png")
  }
  
  /* Sección - Notificacion */
  div.notificacion{
      margin: 0; 
      padding-left: 6%; 
      padding-right: 6%; 
      width: 88%;  
      height: 140px;	
      background-color:white;   
      
  }
  
  div.notificacion div.avatar{
      float:left;  
      width: 260px; 
      height: 140px; 
      margin:0; 
      padding: 0;	  
}
    
 div.notificacion div.avatar video{
    position:relative; 
    width: 100%;
    height: 100%; 
    margin: 0; 
    padding: 0;
  }
  
  div.notificacion div.notificacion_texto{
      float:left; 
      margin-top: 6%;
      margin-left: 1%; 
      display: flex; 
      /* align-items: center; */
  }
  
  div.notificacion div.notificacion_texto img{
      width:  40px;       
      height: 40px;       
      margin:  0; 
      padding: 0;
  }
  
  div.notificacion div.notificacion_texto span{
      margin-left: 10px; 
      font-family: Arial, Helvetica, sans-serif;
      font-size:   15px;
  }
  
  div.notificacion img.img_video_tutorial{
      float: right; 
      width: 140px; 
      height: 60px; 
      margin-top: 4%; 
  }
  
img.img_video_tutorial:hover{
    content:url("../imagenes/play-video_over.png");
}
 
/*******************************************************/
img.reproductor_btn_rewind_click:active {
    content:url("../imagenes/btn_player-rewind_inactivo.png");   
}

img.reproductor_btn_return_click:active {
    content:url("../imagenes/btn_player-return_inactivo.png");   
}
/*******************************************************/

.reproductor_botones{
    text-align: center;
    margin-top: 8px;
}

.menu_reporte_personalizado_contenedor{
    width: 95%; margin: 10px auto; border-radius: 6px;     
}

.menu_reporte_personalizado_titulo{
    width: 100%; height: 42px; background-color: #55B62E; color: white;  border-radius: 4px;
}

.menu_reporte_personalizado_titulo_text_left{
    display: block; float: left;  font-size: 30px; margin-left: 15px; margin-top: 0; padding: 0;
}

.menu_reporte_personalizado_titulo_text{
    display: inline-block; margin: 15px; margin-left: 15px; font-weight: bold;
}
  
.menu_reporte_personalizado_titulo_text_right{
    display: block; margin: 8px; margin-right: 30px; float: right; font-size: 20px; font-weight: bold;
}

.menu_reporte_personalizado_contenido_text{
    display: inline-block; font-size: 14px; margin: 10px 0px 10px 20px; color: #949494; font-weight: bold;
}
.menu_reporte_personalizado_contenedor a{
    text-decoration: none; color:#0000ff9d; font-size: 14px; margin: 0px 5px 5px 0; font-weight: bold;
}